<div class="tab-pane" ng-init="$ctrl.loadMedias()">
  <div class="row">
    <div class="col-12">
      <h6>Selected items</h6>
      <navs data="$ctrl.data" prefix="$ctrl.prefix"></navs>
    </div>
  </div>
  <hr />
  <!--activeMedias-->
  <div class="row">
    <div class="col-12">
      <media-upload on-update="$ctrl.loadMedias()"></media-upload>
    </div>
  </div>
  <hr />
  <div class="row mb-3">
    <!-- <div class="col-12">
            <h3>Medias</h3>
        </div> -->
    <div class="col-md-8">
      <div
        class="btn-toolbar mb-3"
        role="toolbar"
        aria-label="Toolbar with button groups"
      ></div>
    </div>
    <div class="col-md-4">
      <div class="input-group input-group-sm">
        <div class="input-group-text" id="btnGroupAddon">
          <i
            class="mi mi-Search btn-search-media"
            ng-click="$ctrl.loadMedias()"
            style="top: 0; cursor: pointer"
          ></i>
        </div>
        <input
          type="text"
          ng-model="$ctrl.request.keyword"
          ng-enter="$ctrl.loadMedias()"
          class="form-control media-keyword"
          placeholder="Search media items..."
          aria-label="Search media items..."
          aria-describedby="btnGroupAddon"
        />
      </div>
    </div>
  </div>
  <div
    class="card-columns"
    style="column-count: 3 !important; column-gap: 0.75rem"
  >
    <div
      class="card mb-4"
      ng-repeat="media in $ctrl.medias.items"
      ng-hide="media.isHidden"
    >
      <span class="form-check form-switch position-absolute m-1">
        <input
          type="checkbox"
          class="form-check-input"
          ng-model="media.isActived"
          ng-change="$ctrl.activeMedia(media)"
          id="{{$ctrl.prefix}}_Media_Image_{{media.id}}"
          value="true"
        />
        <label
          class="custom-control-label m-0"
          for="{{$ctrl.prefix}}_Media_Image_{{media.id}}"
        >
        </label>
      </span>
      <div
        class="btn-group btn-group-sm position-absolute m-1"
        role="group"
        aria-label="Basic example"
        style="z-index: 3; right: 0"
      >
        <!--<button class="btn btn-dark custom-file-cropper" data-bs-toggle="modal" data-bs-target=".image-crop-modal-lg" data-imgsrc="{{media.fullPath}}" data-imgid="{{media.id}}">
                    <i class="mi mi-Crop"></i>
                </button>
                <button class="btn btn-dark btn-sm" data-imgsrc="{{media.fullPath}}" data-imgid="{{media.id}}" ng-click="removeMedia(media.id)">
                    <i class="mi mi-Delete"></i>
                </button>
                -->
      </div>
      <a
        href="#"
        data-bs-toggle="modal"
        data-bs-target=".image-preview-modal-lg"
        data-imgsrc="{{media.fullPath}}"
      >
        <img
          class="card-img-top"
          ng-src="{{media.fullPath}}"
          alt="{{media.title}}"
        />
      </a>
    </div>
  </div>
  <nav aria-label="Page navigation" ng-if="$ctrl.medias.totalPage>0">
    <ul class="pagination pagination-sm pull-right">
      <li class="page-item">
        <a
          class="page-link active"
          href="javascript:void(0)"
          ng-click="$ctrl.loadMedias($ctrl.medias.pageIndex-1)"
          ng-hide="$ctrl.medias.pageIndex==0"
          >Prev</a
        >
      </li>
      <li
        class="page-item"
        ng-class="{active: n-1==$ctrl.medias.pageIndex}"
        ng-repeat="n in range($ctrl.medias.totalPage)"
      >
        <a
          class="page-link"
          href="javascript:void(0)"
          ng-click="$ctrl.loadMedias(n-1)"
          >{{n}}</a
        >
      </li>
      <li class="page-item">
        <a
          class="page-link"
          href="javascript:void(0)"
          ng-click="$ctrl.loadMedias($ctrl.medias.pageIndex + 1)"
          ng-hide="$ctrl.medias.pageIndex >= ($ctrl.medias.totalPage-1)"
          >Next</a
        >
      </li>
    </ul>
  </nav>
</div>
